<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索 新增 -->
      <el-row>
        <el-col :span="22"
          ><div class="grid-content bg-purple">
            <span style="padding-right: 12px">学科名称</span>
            <el-input
              v-model="input"
              style="width: 200px; padding-right: 12px"
            ></el-input>
            <el-button size="medium" @click="input = ''">清除</el-button>
            <el-button type="primary" size="medium" @click="handleFilter"
              >搜索</el-button
            >
          </div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-light" style="float: right">
            <el-button type="success" size="medium" @click="addSubjects">
              <i
                class="el-icon-edit"
                size="medium"
                style="padding-right: 5px"
              ></i>
              新增科学
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 数据条数-->
      <div class="amount">
        <i class="el-alert__icon el-icon-info"></i>
        <span style="padding-left: 8px">{{ alertText }}</span>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" show-header style="width: 100%">
        <el-table-column fixed type="index" prop="index" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | forMat('YYYY-MM-DD hh:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            <span>{{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              @click="clickDirectorys(scope.row)"
              type="text"
              size="small"
              >学科分类</el-button
            >
            <el-button type="text" size="small" @click="clickTags(scope.row)"
              >学科标签</el-button
            >
            <el-button type="text" size="small" @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.page"
          :total="total"
          :page-sizes="[5, 10, 30, 50]"
          :page-size="pagination.pagesize"
          layout="prev, pager,next,sizes,jumper"
        >
        </el-pagination>
      </div>
      <!-- 添加对话框 -->
      <el-dialog
        :title="isEdit ? '修改学科' : '新增学科'"
        :visible.sync="addDialogVisible"
        width="400px"
      >
        <SubDialog
          :isEdit="isEdit"
          :id="id"
          v-if="addDialogVisible"
          @success="successHnaderl"
        />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import SubDialog from '@/module-hmmm/components/subjects-add.vue'
export default {
  components: {
    SubDialog
  },
  data () {
    return {
      input: '',
      tableData: [],
      total: null,
      alertText: '',
      pagination: {
        page: 1,
        total: 0,
        pagesize: 10,
        subjectName: ''
      },
      isEdit: false,
      id: null,
      addDialogVisible: false
    }
  },
  created () {
    // console.log('this', this)
    this.getableData()
  },
  methods: {
    clickDirectorys (row) {
      this.$router.push({
        path: '/subjects/directorys',
        query: { id: row.id, name: row.subjectName }
      })
      // console.log(row)
    },
    clickTags (row) {
      this.$router.push({
        path: '/subjects/tags',
        query: { id: row.id, name: row.subjectName }
      })
    },
    async getableData () {
      const { data: res } = await list(this.pagination)
      // console.log(res)
      // 获取数据给dataList
      this.tableData = res.items
      // this.tableData.forEach(item => {
      //   if (item.isFrontDisplay === 1) {
      //     item.isFrontDisplay = '是'
      //   } else {
      //     item.isFrontDisplay = '否'
      //   }
      // })
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
    },
    // 搜索信息
    handleFilter () {
      this.pagination.subjectName = this.input
      this.pagination.page = 1
      this.getableData(this.pagination)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      this.pagination.page = 1
      this.getableData(this.pagination)
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getableData()
    },
    // 新增学科
    addSubjects () {
      this.addDialogVisible = true
      this.isEdit = false
    },
    successHnaderl () {
      this.addDialogVisible = false
      this.getableData()
    },
    // 修改学科
    edit (id) {
      this.addDialogVisible = true
      this.isEdit = true
      this.id = id
      // console.log(this.id)
    },
    del (id) {
      this.$confirm('此操作将永久删除该学科' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then((response) => {
              // console.log('1234', response)
              this.$message.success('删除成功了!')
              this.getableData(this.pagination)
            })
            .catch((response) => {
              // console.log(response)
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  padding: 5px 0;

  .amount {
    height: 40px;
    margin: 20px 0;
    padding: 12px 16px;
    border-radius: 5px;
    background-color: #f4f4f5;
    color: #909399;
  }
  .block {
    float: right;
    margin: 15px 0;
  }
}
</style>
